<template>
  <el-dialog
    title="店铺详情"
    :visible.sync="visible"
    v-loading='loading'
    center
    top = 6vh
    width="60%">
  
  <div class="container">
    <el-form label-width="100px">
      <el-form-item label="店主姓名:">{{shop.shopOwner}}</el-form-item>
      <el-form-item label="店铺名:">{{shop.shopName}}</el-form-item>
      <el-form-item label="手机号:">{{shop.mobile}}</el-form-item>
      <el-form-item label="地址:">{{address}}</el-form-item>
      <el-form-item label="身份证:">
        <el-image 
          style="width:250px;"
          :src="idImgs[0]" 
          :preview-src-list="idImgs">
        </el-image>
        <el-image 
          style="width:250px;"
          :src="idImgs[1]" 
          :preview-src-list="idImgs">
        </el-image>
      </el-form-item>
      <el-form-item label="营业执照:">
        <el-image 
          style="width: 250px;"
          :src="bussinessLicense"
          :preview-src-list="[bussinessLicense]">
        </el-image>
      </el-form-item>
      <el-form-item label="卫生许可证:">
        <el-image 
          style="width: 250px;"
          :src="hygienicLicense"
          :preview-src-list="[hygienicLicense]">
        </el-image>
      </el-form-item>
      <el-form-item label='供应商:'>
        <template v-if="!shop.agentId">
        <el-input v-if="!agent" :disabled="true"><template slot="append"><span @click="openAgentList" style="color:#02A1E9">选择供应商</span></template></el-input>
        <el-button v-if="agent" size="small" type="primary" @click="openAgentList">选择供应商</el-button>
        </template>
      </el-form-item>
    </el-form>
    <div v-if="agent" class="shopItem agentItem">
      <el-form :model="agent" ref="agent">
        <el-form-item label="姓名"><el-input :disabled="true" v-model="agent.agentName" placeholder=""></el-input></el-form-item>
        <el-form-item label="电话"><el-input :disabled="true" v-model="agent.agentPhone" placeholder=""></el-input></el-form-item>
        <el-form-item label="地址"><el-input :disabled="true" v-model="agent.address" placeholder=""></el-input></el-form-item>
      </el-form>
    </div>
    
  </div>
  <div slot="footer" v-if="ifShowChangeBtn">
      <el-button type="danger" :loading="btnLoading" @click.stop="changeShopState('not')">不予通过</el-button>
      <el-button type="primary" :loading="btnLoading" @click.stop="changeShopState('pass')">通过审核</el-button>
  </div>

  <!-- 绑定供应商弹窗 -->
  <el-dialog
      title=""
      :visible.sync="chooseAgentVisible"
      :close-on-click-modal="false"
      top="8vh"
      center
      width="70%"
      append-to-body>
      <div style="height:70vh;overflow:auto">
      <avue-crud ref="crud"
              :data="agentList"
              :option="agentOption">
          <template slot-scope="scop" slot="menu">
              <el-button size="medium"   type="normal" @click.stop="chooseAgent(scop.row)">确定</el-button>
          </template>                
      </avue-crud>            
      </div>
      <div style="height:20px" slot="footer">
      </div>
    </el-dialog>


  </el-dialog>
</template>

<script>
import { agentOption } from '@/crud/shop/agent'


export default {
  data(){
    return {
      chooseAgentVisible:false,
      visible :false,
      agentList: [],
      agentOption: agentOption,
      resourcesUrl: window.SITE_CONFIG.resourcesUrl,
      loading: false,
      btnLoading: false,
      ifShowChangeBtn: false,
      shop:{
        shopName: '',
        shopOwner: '',
        mobile: '',
        address: '',
        idCard: '',
        bussinessLicense: '',
        hygienicLicense: ''
      },
      agent:{}
    }
  },

  computed:{
    idImgs(){
      var idImgs=[]
      this.shop.idCard.split(',').forEach((item) =>{
        idImgs.push(this.resourcesUrl+item)
      })
      return idImgs
    },
    address(){
      var shop = this.shop
      return [shop.province,shop.city,shop.area,shop.shopAddress].join('')
    },
    bussinessLicense(){
      return this.resourcesUrl+this.shop.bussinessLicense
    },
    hygienicLicense(){
      return this.resourcesUrl+this.shop.hygienicLicense
    }
  },


  methods:{
    init(shop,ifShowChangeBtn){
      console.log(shop);
      this.visible = true
      this.agent = ''
      this.shop = shop
      this.ifShowChangeBtn = ifShowChangeBtn
      if (shop.agentId) {
        this.getAgentInfo()
      }
    },

    openAgentList(){
      this.chooseAgentVisible = true
      this.$http({
        url: this.$http.adornUrl('/shop/shopDetail/AgentInfo'),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({data}) =>{
        this.agentList = data
      })     
    },

    getAgentInfo(){
      this.$http({
        url: this.$http.adornUrl('/agent/agent/info/'+this.shop.agentId),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({data}) =>{
        this.agent = data
        this.agent.address = [data.province,data.city,data.agentAddress].join('')
      })     
    },

        //选择区域负责人
    chooseAgent(agent){
      this.agent = agent
      this.agent.address = [agent.province,agent.city].join(',')
      this.chooseAgentVisible = false
    },

    changeShopState(isPass){
      console.log("running");
      
      if (isPass == 'pass' &&  !this.agent) {
        this.$message.error('请先选择供应商');
        return 
      }
      this.btnLoading = true
      this.$http({
        url: this.$http.adornUrl("/shop/shopDetail/shopState"),
        // url: this.$http.adornUrl("/shop/shopDetail/shopState?shopId="+id+"&state="+(isPass==='pass'?0:2)),
        method: 'put',
        params: this.$http.adornParams({
          shopId: this.shop.shopId,
          state: isPass == 'pass'?0: 2,
          agentId: this.agent?this.agent.agentId: null
        })
      }).then(({data}) => {
        this.loading = false
        // console.log(data);
        this.btnLoading = false
        this.visible = false
        this.$emit("refresh")
        // this.getDataList()  

        this.$message({
          type:isPass == 'pass'?'success':'error',
          message:isPass == 'pass'?'该店铺通过审核！':'已驳回申请'
        })                          
      })          
      // setTimeout(() =>{
      //   this.btnLoading = false
      // },1000)
    }

  }
}
</script>

<style scoped>
.container{
  height: 68vh;
  width: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
}
.container .shopItem{
  margin: 10px 10px 10px 30px;
  font-size: 15px;
}
/* .el-input{
  width: 400px;
} */
.el-button{
  margin-left: 10px;
}
.el-form-item{
  margin-bottom: 0;
}
.agentItem .el-form-item{
  margin-bottom: 10px;
}
.el-input{
  width: 400px;
}
.shopItem .imgBox{
  width: 250px;
  margin: 11px 0 0 15px;
}

.shopItem.el-input{
  width: 400px;
  margin-bottom: 15px;
}

.container .agentItem{
  display: flex;
  flex-direction: column;
  padding-left: 39px;
}

</style>